{% block content %}
<div class="container"> 
  <h4>Email Analysis</h4>
  <hr>
    <div class="alert alert-info">
        AWS Fraud Detector performs the following checks on Email Address: 
        <li> Email is in a valid format 64 characters (A-z,0-9,-,_, .) to left of the @ symbol, and up to 253 characters to the right. </li>
        <li> Email contains less than 20% missing values </li>
        <li> Email has more than 100 unique addresses </li>
    </div>
    <div class="container">
    	<div class="row">
            <div class="col-6">
              <div class="row">
                <div class="col-6">
                  <p>Email Field</p>
                </div>
                <div class="col-6">
                      <p class="text-right"><b> {{e_stats.email_addr}}</b></p>
                </div>
                </div>
                <div class="row">
                    <div class="col-6">
                      <p style="margin-left:20px;"">Record count</p>
                    </div>
                    <div class="col-6">
                          <p class="text-right">{{e_stats.email_recs}}</p>
                    </div>
                    </div>
                <div class="row">
                    <div class="col-6">
                      <p style="margin-left:20px;"">Valid count</p>
                    </div>
                    <div class="col-6">
                          <p class="text-right">{{e_stats.email_valid}}</p>
                    </div>
                    </div>
                

        <div class="row">
                <div class="col-6">
            <p style="margin-left:20px;"">Invalid count</p>
                </div>
                <div class="col-6">
                      <p class="text-right">{{e_stats.email_invalid }}</p>
        </div>
          </div>
          <div class="row">
              <div class="col-6">
                <p style="margin-left:20px;"">Missing count</p>
              </div>
              <div class="col-6">
                    <p class="text-right">{{e_stats.email_null}}</p>
              </div>
              </div>
        
              <div class="row">
                <div class="col-6">
                  <p style="margin-left:20px;""> Missing pct </p>
                </div>
                <div class="col-6">
                      <p class="text-right">{{e_stats.email_pctnull}}%</p>
                </div>
                </div>
                
          <div class="row">
              <div class="col-6">
                <p style="margin-left:20px;""> Unique count </p>
              </div>
              <div class="col-6">
                    <p class="text-right"> {{e_stats.email_unique}}</p>
              </div>
              </div>
              <div class="row">
                <div class="col-6">
                  <p style="margin-left:20px;""> Unique pct </p>
                </div>
                <div class="col-6">
                      <p class="text-right"> {{e_stats.email_pctunq}}%</p>
                </div>
                </div>
            <div class="row">
                <div class="col-6">
                  <p style="margin-left:20px;""> Unique Domain count </p>
                </div>
                <div class="col-6">
                      <p class="text-right"> {{e_stats.domain_count}}</p>
                </div>
                </div>
             
    </div>
    <div class="col-6">
        <canvas id="emailChart" width="400" height="300"></canvas>
            <script>
                var dataFraud = {{e_stats.domain_fraud}};
                var dataLegit = {{e_stats.domain_legit}};
                var datalabel = {{e_stats.domain_list}}
                
                var bar_ctx = document.getElementById("emailChart");
                var bar_chart = new Chart(bar_ctx, {
                type: 'horizontalBar',
                data: {
                    labels: datalabel,
                    datasets: [{
                        
                        data: dataFraud,
                        backgroundColor: "#689B0C",
                        hoverBackgroundColor: "#D4E4B4",
                        hoverBorderWidth: 1
                    },
                    {
                        
                        data: dataLegit,
                        backgroundColor: "#1975BA ",
                        hoverBackgroundColor: "#B5D3EA",
                        hoverBorderWidth: 1
                    }
                    ]
                },
                options: {
                    title: {
                        display: true,
                        text: 'Top 10 Email Domains'
                        },
                    legend: {
                            display: false
                    },
                    animation: {
                    duration: 10,
                    },
                    scales: {
                    xAxes: [{
                        stacked: true,
                        gridLines: {
                        display: false
                        },
                    }],
                    yAxes: [{
                        stacked: true,
                        ticks: {
                        suggestedMin: 0,
                        suggestedMax: 1
                        },
                    }],
                    },
                    
                },
                });
            </script>
    </div>
    </div>
</div>

{% if e_stats.email_warnings > 0 %}
<div class="alert alert-warning" role="alert">
    <table class="table table-striped">
    <tbody>
    {% for key in e_stats.email_warnings() %}
                    <tr>
                      <td>{{ e_stats.email_warnings[key] }}</td>
                    </tr>
    {% endfor %}
    </tbody>
    </table>
</div>
{% endif %}
</div>

{% endblock %}